<template>
    <div class="" style="background-color: #333742;">
        <div v-if="loading"
             class="loader-wrapper">
            <pulse-loader></pulse-loader>
        </div>

        <div class="container main-container has-text-white">
                    <div class="has-text-centered is-size-1 has-text-info" style="padding-bottom: 2rem;"> 游戏情报 </div>

          <div class="columns">
            <div class="column is-12">
              <div class="columns is-multiline has-text-white">
                <a class="column is-3" href="/static/assets/Empire_paper.pdf" target="_blank">
                  <div class="card has-text-white">
                    <div class="is-size-5 has-text-weight-bold"> 游戏白皮书 </div>
                    <div class="has-text-grey-light is-small"> 包含SLGC介绍 </div>
                  </div>
                </a>

                <a class="column is-3" href="/static/assets/BitEmpire_presale.docx" target="_blank">
                  <div class="card has-text-white">
                    <div class="is-size-5 has-text-weight-bold"> 预售内容 </div>
                    <div class="has-text-grey-light is-small"> 价格会有变动 </div>
                  </div>
                </a>

                <a class="column is-3" href="/static/assets/BitEmpire_faq.docx" target="_blank">
                  <div class="card has-text-white">
                    <div class="is-size-5 has-text-weight-bold"> FAQ  </div>
                    <div class="has-text-grey-light is-small"> 常见问题  </div>
                  </div>
                </a>

                <a class="column is-3" href="/static/assets/BitEmpire_intro.docx" target="_blank">
                  <div class="card has-text-white">
                    <div class="is-size-5 has-text-weight-bold"> 简单介绍 </div>
                    <div class="has-text-grey-light is-small"> 游戏概况 </div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <div class="has-text-centered is-size-1 has-text-info" style="padding-bottom: 2rem;"> 游戏截图 </div>
          <div class="columns is-multiline">

            <div class="column is-4">
              <figure class="image" style="border-radius: 5px;">
                <img src="/static/assets/e11.jpeg" style="border-radius: 5px;">
              </figure>
              <div class="has-text-centered is-size-4">
                <div class="is-size-4">
                  发展城池
                </div>
              </div>
            </div>

            <div class="column is-4">
              <figure class="image" style="border-radius: 5px;">
                <img src="/static/assets/e10.jpeg" style="border-radius: 5px;">
              </figure>
              <div class="has-text-centered is-size-4">
                <div class="is-size-4">
                  郊外开矿
                </div>
              </div>
            </div>

            <div class="column is-4">
              <figure class="image" style="border-radius: 5px;">
                <img src="/static/assets/e8.jpeg" style="border-radius: 5px;">
              </figure>
              <div class="has-text-centered is-size-4">
                <div class="is-size-4">
                  比特大陆
                </div>
              </div>
            </div>

            <div class="column is-4">
              <figure class="image" style="border-radius: 5px;">
                <img src="/static/assets/e4.jpeg" style="border-radius: 5px;">
              </figure>
              <div class="has-text-centered is-size-4">
                <div class="is-size-4">
                  组队寻宝
                </div>
              </div>
            </div>

            <div class="column is-4">
              <figure class="image" style="border-radius: 5px;">
                <img src="/static/assets/e6.jpeg" style="border-radius: 5px;">
              </figure>
              <div class="has-text-centered is-size-4">
                <div class="is-size-4">
                  联军出征
                </div>
              </div>
            </div>

            <div class="column is-4">
              <figure class="image" style="border-radius: 5px;">
                <img src="/static/assets/e3.jpeg" style="border-radius: 5px;">
              </figure>
              <div class="has-text-centered is-size-4">
                <div class="is-size-4">
                  战败归来
                </div>
              </div>
            </div>

            <div class="column is-4">
              <figure class="image" style="border-radius: 5px;">
                <img src="/static/assets/e2.jpeg" style="border-radius: 5px;">
              </figure>
              <div class="has-text-centered is-size-4">
                <div class="is-size-4">
                  获取神兵秘笈
                </div>
              </div>
            </div>

            <div class="column is-4">
              <figure class="image" style="border-radius: 5px;">
                <img src="/static/assets/e1.jpeg" style="border-radius: 5px;">
              </figure>
              <div class="has-text-centered is-size-4">
                <div class="is-size-4">
                  全身极品套装
                </div>
              </div>
            </div>

            <div class="column is-4">
              <figure class="image" style="border-radius: 5px;">
                <img src="/static/assets/e5.jpeg" style="border-radius: 5px;">
              </figure>
              <div class="has-text-centered is-size-4">
                <div class="is-size-4">
                  迎娶白富美
                </div>
              </div>
            </div>

          </div>



        </div>
    </div>
</template>

<script>
    import PulseLoader from 'vue-spinner/src/PulseLoader';
    import API, { eos, currentEOSAccount } from '@/util/api';

    export default {
        name: 'index',
        components: {
            PulseLoader,
        },

        data() {
            return {
                tokenPrice: [],
                news_list: [],
                loading: true,
            };
        },

        computed: {},

        async created() {
          this.news_list = await API.getNewsList();
          this.updateNews();
          this.loading = false;
        },

        methods: {
          timestampToStr(timestamp) {
              timestamp += 8*60*60;
              var result = new Date(parseInt(timestamp) * 1000).toISOString().replace('T', ' ').slice(10,16);
              return result;
          },
          async updateNews() {
            function sleep(ms) {
              return new Promise(resolve => setTimeout(resolve, ms));
            }
            for (var i=0;i<1000;i++) {
              await sleep(5000);
              this.news_list = await API.getNewsList();
            }
          }
        },
        watch: {},
    };
</script>
<style scoped>
    .loader-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .main-container {
      padding-top: 1rem;
      background-color: #333742;
    }
    .card {
        border:0.5px solid grey;
        border-radius: 2px;
        padding: 10px;
        background-color: #333742;
    }
    pre {
      padding: 0.1rem;
    }
</style>
